<?php 
  $response = sfContext::getInstance()->getResponse();
  $response->addJavascript(sfConfig::get('app_fusionchart_js_dir'). 'FusionCharts.js');

  $chartPath = sfConfig::get('app_fusionchart_chart_dir');
  $chartType = $chartPath.'Column2D.swf';
  use_helper('Report');
?>
<div>
    <h3><?php echo $chartCaption ?></h3>
    <div>
      Please select:
      <?php echo memberSelect($members, $day, $memid)?>
      <?php echo chartTypeSelect() ?>
      <input type="button" id="showChart" value="Show"  />
    </div>
    <div id="<?php echo $chartId ?>" align="center">Chart is not available.</div>
    <script type="text/javascript">

    function getItem(url) {
      /*
      $.ajax({
        type: "GET",
        dataType:"json",
        url: url,
        success: function(data) {
          alert(data);
        }
      });
      */
      $.getJSON(url, function(data){
        //alert(getTable(data));
        //$("#items").empty();
        //$("#items").fadeIn("slow");
        //$("#items").append(getTable(data));
        var title = data['title'];
        var sorting = title.length == 4 ? [[2,'desc'], [3,'desc']] : [[2, 'desc']]; 
        
        $("#items_wrapper").children().empty();
        if ($("#items_wrapper")[0] != null) {
          $("#items_wrapper")[0].id = 'items';
        }
        $("#items")[0].innerHTML = getTable(data);
        $("#items").fadeIn("slow").dataTable({
          "aaSorting": sorting,
          fnDrawCallback : function() {
            $("#items a").click(function() {
              return false;
            });
            $("#items a").each(function() {
              var url;
              var content = "hello world";
              if (this.title == this.text) {
                url = "/report/getIssues?synopsis=" + this.text;
              } else {
                url = "/report/getIssues?id=" + this.title + "&synopsis=" + this.text;
              }
              
              $(this).qtip({
                content: {
                  url : url
                },
                position: {
                  corner: {
                    target: 'rightMiddle', // Position the tooltip above the link
                    tooltip: 'leftMiddle'
                  },
                  adjust: {
                    screen: true // Keep the tooltip on-screen at all times
                  }
                },
                style: {
                  tip: true, // Give it a speech bubble tip with automatic corner detection
                  name: 'cream',
                  width: { max: 700 }
                },
                hide: { effect: 'slide', fixed: true, delay: 200 }
              });              
            });
          }
        });
        
        

      });
      
    }

    function getIssues(json) {
      total = '<table class="item"><tr>';
      //return total+'</table>';
      return "hello world!";
    }

    function getTable(json) {
      total = '<table class="display"><thead><tr>';
      title = json['title'];
      for (i=0; i<title.length; i++) {
        total += '<th>' + title[i] + '</th>'; 
      }
      
      total += '</tr></thead><tbody>';
      data = json['data'];

      is_anchor = title.length == 3 ? 0: 1;
      for (i=0; i<data.length; i++) {
        total += '<tr>';
        for (j=0; j<title.length; j++) {
          if (j == is_anchor) {
            t = is_anchor == 1 ? data[i][j-1] : data[i][j];
            total += '<td><a class=".issueItem" href="#" title="' + t + '">' + data[i][j] + '</a></td>';
          } else {
            total += '<td>' + data[i][j] + '</td>';
          }
        }
        total += '</tr>';
      }
      total += '</tbody></table>';
      return total;
    }
    
    var myChart = new FusionCharts("<?php echo $chartType ?>", "<?php echo $chartId ?>", "<?php echo $chartWidth ?>", "<?php echo $chartHeight ?>", "0", "1");
    myChart.setDataURL(escape("<?php echo $chartUrl ?>"));
    myChart.render("<?php echo $chartId ?>");
    
    $(document).ready(function() {
      /*
      $('.memberChart').click(function() {
        swf   = myChart.getAttribute('swf');
        id    = myChart.getAttribute('id');
        width = myChart.getAttribute('width');
        height= myChart.getAttribute('height');
        myChart = new FusionCharts(swf, id, width, height);
        myChart.setDataURL("/report/getLoadDistribution"+escape(this.search));
        myChart.render(id);
        return false;
        
      });

      
      $('.chartType').click(function() {
        swf   = "<?php echo $chartPath ?>" + this.title;

        url   = myChart.getVariable('dataURL');
        id    = myChart.getAttribute('id');
        width = myChart.getAttribute('width');
        height= myChart.getAttribute('height');
        myChart = new FusionCharts(swf, id, width, height);
        myChart.setDataURL(url);
        myChart.render(id);
        return false;
      });
      */
      
      $('#showChart').click(function() {
        chart = $('#chartType')[0].value;
        c = $('#chartType')[0];
        cname = c.options[c.selectedIndex].text;
        memid = $('#memberChart')[0].value;
        day   = "<?php echo $day ?>";
        if (memid == -1) {
          query = "?chart=" + cname + "&day="+day;
        } else {
          query = "?chart=" + cname + "&day="+day+"&memid="+memid;
        }
        
        swf   = "<?php echo $chartPath ?>" + chart;
        //prompt("/report/getLoadDistribution"+query, "/report/getLoadDistribution"+query);
        url   = "/report/getLoadDistribution"+escape(query);
        id    = myChart.getAttribute('id');
        width = myChart.getAttribute('width');
        height= myChart.getAttribute('height');
        myChart = new FusionCharts(swf, id, width, height);
        myChart.setDataURL(url);
        myChart.render(id);
      });
    });
    
    function saveChart() {
      //Get chart from its ID
      //var chartToPrint = getChartFromId("<?php echo $chartId ?>");
      //chartToPrint.saveAsImage();
      alert('To be done');
   }
    </script>
    
    <hr />
    <div id="items">

    </div>
    
    <br/>
    
    <div id="issues"></div>
    <hr/>
    <center>
      <input type='button' value='Generate PDF' onClick='javascript:saveChart();'>
    </center>
    
</div>